<div class="search-result-table" id="my-reagent-list-table">
    <div class="search-table-head search-table-row">
        <div class="t-item t-head"></div>
        <div class="t-item t-head"></div>
        <div class="t-item t-head" i-translate="MOL_WT"></div>
        <div class="t-item t-head" i-translate="MOLECULAR_FORMULA"></div>
        <div class="t-item t-head" i-translate="CHEMICAL_NAME"></div>
        <div class="t-item t-head" i-translate="COMPOUND_ID"></div>
    </div>
    <div class="search-table-body" ng-form="$id">
        <div ng-repeat="item in vm.indigoTableContent | filter
            : vm.indigoTableFilter as filteredTableContent track by $index"
             class="search-table-wrap">
            <div class="search-table-row"
                 ng-class="{'search-table-row-highlight':item.$$isSelected || vm.selectedReactant === item}"
                 ng-click="item.$$isCollapsed = !item.$$isCollapsed">
                <a class="t-item">
                    <span ng-class="{'icon icon-arrow_right':item.$$isCollapsed,
                              'icon icon-arrow_down':!item.$$isCollapsed}">
                    </span>
                </a>
                <div class="t-item" ng-click="$event.stopPropagation()">
                    <indigo-checkbox ng-if="::vm.isMultiple"
                                     class="checkbox-inline"
                                     indigo-model="item.$$isSelected"
                                     indigo-change="vm.onSelectItems(filteredTableContent)"></indigo-checkbox>
                    <simple-radio ng-if="::!vm.isMultiple">
                        <input name="reactantSelected"
                               ng-click="vm.selectSingleItem(item);"
                               ng-checked="vm.selectedReactant === item">
                    </simple-radio>
                </div>
                <div class="t-item" ng-bind="item.molWeight.value | round"></div>
                <div class="t-item" ng-bind="item.formula.length ? item.formula : item.formula.value || '-'"></div>
                <div class="t-item" ng-bind="item.chemicalName"></div>
                <div class="t-item" ng-bind="item.compoundId"></div>
                <div class="search-table-popup" ng-if="item.structure.image && item.$$isCollapsed">
                    <img uib-popover-template="'search-result-table-image.html'"
                         class="search-table-img"
                         popover-title="{{item.fullNbkBatch}}" popover-trigger="'mouseenter'" popover-placement="left"
                         ng-src="data:image/svg+xml;base64,{{item.structure.image}}" alt="Image is unavailable.">
                </div>
            </div>
            <div uib-collapse="item.$$isCollapsed" class="search-table-row-details">
                <div class="row" ng-if="!item.$$isCollapsed">
                    <div class="col-xs-6">
                        <div class="m-b20">
                            <span class="semi-b" i-translate="REAGENT_INFORMATION"></span>
                            <button class="btn btn-default btn-small m-l5" type="button" ng-if="vm.indigoEditableInfo"
                                    ng-click="vm.editInfo(item)" ng-disabled="vm.isEditMode">
                                <span class="icon icon-edit"></span><span class="m-l5" i-translate="EDIT"></span>
                            </button>
                        </div>
                        <div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label" i-translate="COMPOUND_ID" i-end=":"></label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <simple-input ng-if="vm.isEditMode">
                                        <input class="form-control"
                                               ng-model="item.compoundId"
                                               disabled="true">
                                    </simple-input>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.compoundId"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label" i-translate="BATCH_NUMBER" i-end=":"></label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <simple-input ng-if="vm.isEditMode">
                                        <input class="form-control"
                                               ng-model="item.fullNbkBatch"
                                               disabled="true">
                                    </simple-input>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.fullNbkBatch"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label" i-translate="MOLECULAR_FORMULA" i-end=":"></label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <simple-input ng-if="vm.isEditMode">
                                        <input class="form-control"
                                               ng-model="item.formula.value || item.formula"
                                               disabled="true">
                                    </simple-input>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.formula.length ? item.formula : item.formula.value || '-'"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label" i-translate="MOLECULAR_WEIGHT" i-end=":"></label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <simple-input ng-if="vm.isEditMode">
                                        <input class="form-control"
                                               ng-model="item.molWeight.value | round"
                                               disabled="true">
                                    </simple-input>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.molWeight.value | round"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label" i-translate="REAGENT_TYPE" i-end=":"></label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <autocomplete ng-if="vm.isEditMode"
                                                  items="vm.rxnValues"
                                                  model="item.rxnRole">
                                    </autocomplete>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.rxnRole.name"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label" i-translate="CHEMICAL_NAME" i-end=":"></label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <simple-input ng-if="vm.isEditMode">
                                        <input class="form-control"
                                               ng-model="item.chemicalName">
                                    </simple-input>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.chemicalName"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label" i-translate="SALT_CODE" i-end=":"></label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <autocomplete ng-if="vm.isEditMode"
                                                   items="vm.saltCodeValues"
                                                   on-select="vm.recalculateSalt(item)"
                                                   model="item.saltCode">
                                    </autocomplete>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.saltCode.name"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label" i-translate="SALT_EQ" i-end=":"></label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <simple-input ng-if="vm.isEditMode">
                                        <input class="form-control"
                                               type="number"
                                               ng-change="vm.recalculateSalt(item)"
                                               ng-model="item.saltEq.value">
                                    </simple-input>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.saltEq.value"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label" i-translate="EXTERNAL_N" i-end=":"></label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <simple-input ng-if="vm.isEditMode">
                                        <input class="form-control"
                                               ng-model="item.externalNumber">
                                    </simple-input>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.externalNumber"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label">
                                        Compound State:</label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <indigo-select ng-if="vm.isEditMode"
                                                   indigo-dictionary="Compound State"
                                                   indigo-model="item.compoundState">
                                    </indigo-select>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.compoundState.name"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label" i-translate="BATCH_COMMENT"></label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <simple-input ng-if="vm.isEditMode">
                                        <input class="form-control"
                                               ng-model="item.comments">
                                    </simple-input>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.comments"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <label class="control-label" i-translate="BATCH_HAZARD_COMMENT"></label>
                                </div>
                                <div class="col-xs-6" ng-class="{'info-col':!vm.isEditMode}">
                                    <simple-input ng-if="vm.isEditMode">
                                        <input class="form-control"
                                               ng-model="item.hazardComments">
                                    </simple-input>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.hazardComments"></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-6">
                                    <label class="control-label" i-translate="CAS_NUMBER"></label>
                                </div>
                                <div class="col-xs-6">
                                    <simple-input ng-if="vm.isEditMode">
                                        <input class="form-control"
                                               ng-model="item.casNumber">
                                    </simple-input>
                                    <p ng-if="!vm.isEditMode" ng-bind="item.casNumber"></p>
                                </div>
                            </div>
                            <div class="btn-group" ng-if="vm.isEditMode">
                                <button class="btn btn-primary" type="button" ng-click="vm.finishEdit()"
                                        ng-disabled="false"><span class="icon icon-save"></span>
                                    <span class="m-l5" i-translate="SAVE"></span>
                                </button>
                                <button class="btn btn-default" type="button" ng-click="vm.cancelEdit($index)"
                                        ng-disabled="false"><span class="icon icon-stop"></span>
                                    <span class="m-l5" i-translate="CANCEL"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <span class="semi-b" i-translate="STRUCTURE"></span>
                        <div>
                            <img class="img-responsive search-result-table__img-structure"
                                 ng-if="item.structure.image"
                                 ng-src="data:image/svg+xml;base64,{{item.structure.image}}"
                                 alt="Image is unavailable.">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="search-result-table-image.html">
    <div>
        <img class="img-fill" ng-src="data:image/svg+xml;base64,{{item.structure.image}}"
             alt="Image is unavailable.">
    </div>
</script>
